<template>
  <div class="head">
    <h1>Laboratory safety education</h1>
    <h3>based on historical accident</h3>
  </div>
  <el-divider />
  <div class="title">
    <div class="imgTitle">
      <img
        style="width: 180px"
        src="@/images/homePage/experimentCredit.jpg"
        alt=""
      />
      <div class="subtitle">Experimenter credit</div>
    </div>
    <div class="imgTitle">
      <img
        style="width: 180px"
        src="@/images/homePage/experimentCredit.jpg"
        alt=""
      />
      <div class="subtitle">Experimenter credit</div>
    </div>
    <div class="imgTitle">
      <img
        style="width: 180px"
        src="@/images/homePage/experimentCredit.jpg"
        alt=""
      />
      <div class="subtitle">Experimenter credit</div>
    </div>
    <div class="imgTitle">
      <img
        style="width: 180px"
        src="@/images/homePage/experimentCredit.jpg"
        alt=""
      />
      <div class="subtitle">Experimenter credit</div>
    </div>
  </div>
  <el-divider />
  <div class="library">
    <div style="font-size: 24px; margin-left: 40px">Theme Library:</div>
    <div style="display: flex; margin-top: 20px; height: 100px">
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">chemical</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">equipment</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">consumables</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">experiment project</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">risk analysis</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">chemical</button>
      </transition>
    </div>
    <div style="font-size: 24px; margin-left: 40px; margin-top: 20px">
      Specialized Topic Library
    </div>
    <div style="display: flex; margin-top: 20px; height: 100px">
      <transition name="el-zoom-in-center">
        <div v-show="show" class="transition-box">
          safety education study resources
        </div>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">safety study exam</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">safety questionare</button>
      </transition>
      <transition name="el-zoom-in-center">
        <button v-show="show" class="transition-box">accident data</button>
      </transition>
    </div>
  </div>
  <div
    style="
      position: fixed;
      text-align: center;
      bottom: 0;
      margin: 0 auto;
      width: 100%;
      color: #5c6b77;
    "
  >
    <a target="_blank" style="color: #5c6b77" href="https://beian.miit.gov.cn"
      >蜀ICP备2023010310号-2</a
    >
    &nbsp; @2024-2025 brenda
  </div>
</template>

<script setup lang="ts" name="HomePage">
import { ref } from "vue";

let show = ref(false);
setTimeout(() => {
  show.value = true;
}, 200);
</script>
<style scoped>
.head {
  margin-left: 20px;
}
.title {
  display: flex;
  text-align: center;
  font-size: 24px;
  margin-top: 40px;
}
.library {
  text-align: center;
  font-size: 24px;
  margin-top: 50px;
}
.imgTitle {
  margin: 20px;
  display: flex;
  flex: 1 0 0%;
  flex-direction: column;
}
/* .subtitle {
  margin-left: 80px;
  margin-right: 40px;
} */
.subtitle:hover {
  text-decoration: underline;
  color: blueviolet;
}
button {
  margin-top: 20px;
  margin-left: 30px;
  margin-right: 30px;
  width: 240px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  background-color: #da70d6;
  border-radius: 5px;
  border: 1px;
}
button:hover {
  background-color: #00c957;
}
.transition-box {
  border-radius: 4px;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-top: 20px;
  margin-left: 80px;
  margin-right: 30px;
  width: 200px;
  height: 80px;
  font-size: 20px;
  text-align: center;
  background-color: #da70d6;
  border: 1px;
}
.transition-box:hover {
  /* text-decoration: underline; */
  background-color: #67c23a;
  /* color: blueviolet; */
}
.el-zoom-in-center {
  display: flex;
  margin-left: 100px;
  text-align: center;
}
</style>
